<template>
  <div class="setting_info">
    <div class="con">
      <span class="title">个人资料</span>
      <div class="item">
        <span class="tip">姓名</span>
        <span class="res">
          <input type="text" v-model="dataForm.name" placeholder="请输入姓名" maxlength="10"/>
        </span>
      </div>
      <div class="item">
        <span class="tip">性别</span
        ><span class="res" @click="sexShow = true">
          {{ dataForm.sexFlag == "2" ? "女" : "" }}
          {{ dataForm.sexFlag == "1" ? "男" : "" }}
          {{
            dataForm.sexFlag != "1" && dataForm.sexFlag != "2" ? "未设置" : ""
          }}
        </span>
      </div>
      <van-action-sheet
        v-model="sexShow"
        :actions="sexActions"
        @select="onSexSelect"
      />

      <div class="item">
        <span class="tip">生日</span
        ><span class="res" @click="birthdayShow = true">
          {{ !dataForm.birthday ? "未设置" : dataForm.birthday }}
        </span>
      </div>

      <div class="item">
        <span class="tip">手机号码</span
        ><span class="res">
          <input
            type="text"
            v-model="dataForm.mobilePhone"
            v-if="!!dataForm.mobilePhone"
            placeholder="请输入手机号码"
          />
          <input
            type="text"
            v-model="dataForm.mobilePhone"
            v-else
            placeholder="支付后系统自动录入"
            disabled
          />
        </span>
      </div>

      <span class="title">爱车资料</span>
      <div class="item">
        <span class="tip">车辆品牌</span
        ><span class="res">
          <input
            type="text"
            v-model="dataForm.truckBrand"
            placeholder="请输入车辆品牌"
            maxlength="10"
          />
        </span>
      </div>
      <div class="item">
        <span class="tip">车牌号</span
        ><span class="res">
          <input
            type="text"
            v-model="dataForm.truckNumber"
            placeholder="请输入车牌号"
            maxlength="10"
          />
        </span>
      </div>
      <div class="item">
        <span class="tip">常加油品</span
        ><span class="res" @click="oilIdShow = true">
          {{ translationOilIdToOilName(dataForm.oilId) }}
        </span>
      </div>

      <van-action-sheet v-model="birthdayShow" title="">
        <van-datetime-picker
          @confirm="onBirthdayConfirm"
          @cancel="onBirthdayCancel"
          v-model="birthdayCurrentDay"
          type="date"
          title="选择年月日"
          :min-date="birthdayMinDate"
          :max-date="birthdayMaxDate"
        />
      </van-action-sheet>
      <van-action-sheet v-model="oilIdShow" title="">
        <van-picker
          show-toolbar
          title="标题"
          :columns="oilList"
          value-key="name"
          :default-index="2"
          @confirm="oilIdConfirm"
        />
      </van-action-sheet>
    </div>

    <!--
      <van-cell-group>
        <van-field v-model="value" label="文本" placeholder="请输入用户名" />
      </van-cell-group>
      <van-password-input
        :value="value"
        info="密码为 6 位数字"
        :error-info="errorInfo"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    -->
    <div class="btn" @click="upInfo">
      保存资料
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import Vue from "vue";
import { Switch } from "vant";

Vue.use(Switch);
import { PasswordInput, NumberKeyboard } from "vant";

Vue.use(PasswordInput);
Vue.use(NumberKeyboard);

import { DatetimePicker } from "vant";

Vue.use(DatetimePicker);

import { ActionSheet } from "vant";

Vue.use(ActionSheet);
import { Picker } from "vant";

Vue.use(Picker);

export default {
  head() {
    return {
      title: "用户及爱车资料"
    };
  },
  data() {
    return {
      images: [],
      list: [],
      loading: false, //加载状态
      finished: false, //是否完成加载
      refreshing: false, //是否正在上拉刷新
      value: "123",
      errorInfo: "请输入数字",
      showKeyboard: true,
      checked: true,
      show: true,

      show1: false,

      sexActions: [
        { name: "男", value: "1" },
        { name: "女", value: "2" }
      ],
      sexShow: false,

      birthdayShow: false,
      birthdayMinDate: new Date(1960, 0, 1),
      birthdayMaxDate: new Date(2020, 0, 1),
      birthdayCurrentDay: new Date(2000, 0, 1),
      oilIdShow: false,

      dataForm: {
        name: "",
        sexFlag: "",
        birthday: "", //生日
        mobilePhone: "",
        truckBrand: "", // 车辆品牌
        truckNumber: "", //车牌号
        oilId: "1"
      },
      oilList: [
        // {
        //   oilName:"92#",
        //   oilId:'1'
        // },
        // {
        //   oilName:"93#",
        //   oilId:'2'
        // },
      ]
    };
  },
  components: {
    // PasswordInput: PasswordInput,
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    }),
    ...mapState({
      // pointInfo: (state) => state.point.pointInfo,
    })
  },
  created() {
    this.getInfo();
    this.getOilList();
  },
  mounted() {
    // this.getPointInfo();
  },
  methods: {
    ...mapActions({
      // getPointInfo: "point/getPointInfo",
    }),
    async getInfo() {
      try {
        const infoData = await this.$axios.$get("/selectMemberInfo", {
          params: {
            enterpriseId: this.enterpriseId,
            mobilePhone: this.phone
          }
        });

        if (infoData.retCode !== 0) {
          throw new Error(infoData.message);
        }
        this.dataForm = infoData.data;
      } catch (error) {
        alert(error);
      }
    },
    async upInfo() {
      try {
        const infoData = await this.$axios.$post(
          "/updateMemberInfo",
          this.dataForm
        );
        if (infoData.retCode !== 0) {
          throw new Error(infoData.message);
        }
        alert("更新成功~");
      } catch (error) {
        alert(error);
      }
    },
    async getOilList() {
      try {
        const oilListData = await this.$axios.$get("/selectOilInfoList");
        if (oilListData.retCode !== 0) {
          throw new Error(oilListData.message);
        }
        this.oilList = oilListData.data.map(res => {
          return {
            ...res,
            name: res.oilName + "-" + res.oilClass + "-" + res.oilType
          };
        });
        console.log("2222222222", this.oilList);
      } catch (error) {
        alert(error);
      }
    },
    onSexSelect(item) {
      this.dataForm.sexFlag = item.value;
      this.sexShow = false;
    },
    onBirthdayConfirm(value) {
      let year = value.getFullYear();
      let month = +value.getMonth() + 1;
      let date = value.getDate();
      this.dataForm.birthday = year + "-" + month + "-" + date;
      this.birthdayShow = false;
    },
    onBirthdayCancel() {
      this.birthdayShow = false;
    },
    oilIdConfirm(val) {
      this.dataForm.oilId = val.oilId;
      this.dataForm = { ...this.dataForm };
      this.oilIdShow = false;
    },
    translationOilIdToOilName(id) {
      const oil = this.oilList.find(ele => {
        return ele.oilId == id;
      });

      if (!oil) {
        return "未设置";
      }
      console.log("oil", oil);

      return oil.oilName + "-" + oil.oilClass + "-" + oil.oilType;
    }
  }
};
</script>

<style lang="scss" scope>
.setting_info {
  width: 7.5rem;
  min-height: 100vh;
  background-color: #f5f6f7;
  padding: 0 0.29rem;
  box-sizing: border-box;
  overflow: hidden;

  > .con {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 10rem;
    box-sizing: border-box;
    margin-top: 0.3rem;

    .title {
      font-size: 0.3rem;
      font-weight: bold;
      line-height: 0.5rem;
      height: 0.5rem;
    }
    .item {
      display: flex;
      justify-content: space-between;
      width: 6.87rem;
      height: 0.87rem;
      background: #ffffff;
      border-radius: 0.15rem;
      padding: 0 0.2rem;
      box-sizing: border-box;
      align-items: center;
      font-size: 0.28rem;
      color: #000000;

      .res {
        input {
          background: none;
          outline: none;
          border: none;
          text-align: right;
        }
      }
    }
  }
  .btn {
    width: 5.24rem;
    height: 0.75rem;
    background: linear-gradient(-67deg, #fdb816, #fb8b0a);
    border-radius: 0.5rem;
    margin: 0 auto;
    margin-top: 0.3rem;
    line-height: 0.75rem;
    text-align: center;

    font-size: 0.28rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
  }
}
</style>
